<template>
  <div class="relative inline-block">
    <img :src="img" class="fullscreen" @click="editDialog = true" />
    <el-dialog
      title="查看图片"
      append-to-body
      :modal="false"
      custom-class="widget-dialog-blue absolute center no-margin color-black white-bg"
      width="500px"
      :visible.sync="editDialog"
      ><img :src="img" @click="open(img)" class="full-width" />
      <template slot="footer">
        <el-button
          class="button-cancel"
          @click="editDialog = false"
          style="margin-right: 8px"
          >返回</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { wechatWorkGetMedia } from "@/api";
import { developmentUrl, isDev, apiRootPath } from "@/configurations";
export default {
  props: {
    imgSrc: {
      default: "",
    },
  },
  data() {
    return {
      img: "",
      editDialog: false,
    };
  },
  watch: {
    imgSrc: {
      handler(n, o) {
        if (!n) return;
        wechatWorkGetMedia({
          mediaId: this.imgSrc,
        }).then(({ data }) => {
          if (isDev) {
            this.img =
              developmentUrl.replace(apiRootPath.slice(0, -1), "") + data;
            return;
          }
          console.log("图片", this.img);
          this.img = data;
        });
      },
      immediate: true,
    },
  },
  methods: {
    open(src) {
      window.open(src);
    },
  },
};
</script>

<style  lang="scss" scoped>
@import "@/styles/buttons.scss";
</style>